<template>
    <div class="d3">
        <svg id="d302" width="500" height="500">
            <g style="transform: translate(50px, 50px)">
                <path :d="line"/>
            </g>
        </svg>
    </div>
</template>

<script>
    /*eslint-disable*/
    import * as d3 from 'd3';

    export default {
        name: 'd3-02',
        data() {
            return {
                data: [1, 3, 9, 5, 3, 8],
                line: '',
                $svg: null
            };
        },
        async mounted() {
            await this.$nextTick();
            this.$svg = d3.select('#d302');
            this.calculatePath();
        },
        methods: {
            getScales() {
                const x = d3.scaleTime().range([0, 400]); // d3.scaleTime - 创建一个线性的时间比例尺.
                x.domain(d3.extent(this.data, (d, i) => i)); // d3.extent - 计算数组中的最大值和最小值.

                const y = d3.scaleLinear().range([300, 0]); // d3.scaleLinear - 创建一个定量的线性比例尺
                y.domain([0, d3.max(this.data, d => d)]); // d3.max - 计算数组中的最大值.
                return {x, y};
            },
            calculatePath() {
                const {$svg, data} = this;
                const scale = this.getScales();
                const path = d3.line()
                    .x((d, i) => scale.x(i))
                    .y(d => scale.y(d))
                // .curve(d3.curveCardinal); // 曲线
                this.line = path(this.data);

                // 创建靠左的Y轴刻度
                const yAxis = d3.axisLeft().scale(scale.y); // d3.axisLeft - 创建一个新的刻度在左的坐标轴生成器
                yAxis.ticks(5, 's');
                $svg.append('g').attr('transform', 'translate(50,50)').call(yAxis)
                    .append('text').text('数值')
                    // .attr('transform', 'rotate(-90)')
                    .attr('text-anchor', 'end')
                    .attr('dx', '5em')
                    .attr('stroke', 'red');


                // 创建底部的X轴刻度值
                const xAxis = d3.axisBottom().scale(scale.x); // d3.axisBottom - 创建一个新的刻度在下的坐标轴生成器
                xAxis.ticks(data.length, 's');
                $svg.append('g').attr('transform', 'translate(50,350)').call(xAxis)
                    .append('text').text('数量')
                    .attr('stroke', 'blue')
                    .attr('dx', '420px')
            },
        },
    };
</script>
<style lang="less">
    .d3 {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;

        svg {

            path {
                fill: none;
                stroke: #76BF8A;
                stroke-width: 3px;
            }

            text {
                /*stroke: red;*/
            }
        }
    }
</style>
